<template>
	<view class="">
		<u-sticky>
			<view class="u-flex u-row-center u-m-t-30">
				<u-subsection class="subsection-style" :list="subsectionList" :current="sectionIndex"
					active-color="#19be6b" font-size="25" height="60" @change="sectionChange"></u-subsection>
			</view>
		</u-sticky>
		<view :index="index" v-for="(item, index) in dataList" :key="item.id">
			<view class="u-m-20">
				<view class="u-flex u-flex-nowrap u-row-between">
					<view class="u-font-12">账本：{{item.bookName}}</view>
					<view class="u-tips-color">{{dateTitle}}时间：{{item.createTime}}</view>
					<view v-if="sectionIndex==0"><u-button type="success" shape="circle" size="mini"
							@click="clickAgree(item)">同意</u-button>
					</view>
				</view>
				<view class="u-flex u-flex-nowrap u-row-between u-tips-color u-m-t-20">
					<view v-if="sectionIndex==0">申请人：{{item.userName}}</view>
					<view v-if="sectionIndex==1">申请人：{{item.approvalUserName}}</view>
					<view v-if="sectionIndex==1">审批人：{{item.userName}}</view>
					<view v-if="sectionIndex==1">状态：{{item.approvalStatus==0?'拒绝':'同意'}}</view>
					<view v-if="sectionIndex==0"><u-button type="error" shape="circle" size="mini"
							@click="clickReject(item)">拒绝</u-button></view>
				</view>
			</view>
			<u-line color="#18b566 " border-style="dotted"></u-line>
		</view>
	</view>
</template>

<script>
	let _this;
	export default {
		data() {
			return {
				subsectionList: [{
						name: '未审批'
					},
					{
						name: '已审批'
					},
					{
						name: '我的申请'
					}
				],
				sectionIndex: 0,
				dateTitle: '申请',
				dataList: []
			}
		},
		onLoad() {
			_this = this;
		},
		onShow() {
			if (!_this.os_token) {
				_this.goReLaunchUrl('/pages/user/login')
			}
			_this.auditAll()
		},
		methods: {
			//选择模块
			sectionChange(index) {
				_this.sectionIndex = index
				_this.dataList = []
				if (index == 0) {
					_this.dateTitle = "申请"
					_this.auditAll()
				} else if (index == 1) {
					_this.dateTitle = "审批"
					_this.selectApprovalInfo()
				} else {
					_this.dateTitle = "申请"
					_this.myApply()
				}
			},
			//查询所有申请加入的用户
			async auditAll() {
				console.log("auditAll")
				await _this.$u.api.auditAll().then((res) => {
					console.log("auditAll" + JSON.stringify(res))
					if (res) {
						_this.dataList = res
					}
				}).catch(() => {
					uni.hideLoading()
				})
			},
			//查询我的申请
			async myApply() {
				console.log("myApply")
				await _this.$u.api.myApply().then((res) => {
					console.log("myApply" + JSON.stringify(res))
					if (res) {
						_this.dataList = res
					}
				}).catch(() => {
					uni.hideLoading()
				})
			},
			//点击同意
			clickAgree(e) {
				_this.agree(e)
				_this.refreshPage()
			},
			//点击拒绝
			clickReject(e) {
				_this.reject(e)
				_this.refreshPage()
			},
			refreshPage() {
				uni.navigateTo({
					url: '/pages/user/approval'
				})
			},
			//同意
			async agree(e) {
				console.log("agree")
				await _this.$u.api.agree({
					bookId: e.bookId,
					userId: e.userId,
					remark: e.remark
				}).then((res) => {
					console.log("agree" + JSON.stringify(res))
					_this.auditAll()
				}).catch(() => {
					uni.hideLoading()
				})
			},
			//拒绝
			async reject(e) {
				console.log("reject")
				await _this.$u.api.reject({
					bookId: e.bookId,
					userId: e.userId,
					remark: e.remark
				}).then((res) => {
					console.log("reject" + JSON.stringify(res))
					_this.auditAll()
				}).catch(() => {
					uni.hideLoading()
				})
			},
			//查询已审批记录
			async selectApprovalInfo() {
				console.log("selectApprovalInfo")
				await _this.$u.api.selectApprovalInfo().then((res) => {
					console.log("selectApprovalInfo" + JSON.stringify(res))
					if (res) {
						_this.dataList = res
					}
				}).catch(() => {
					uni.hideLoading()
				})
			},
			//跳转到页面，关闭其他页面
			goReLaunchUrl(path, params) {
				_this.$u.vuex('os_token', '');
				_this.$u.vuex('os_user', '');
				uni.reLaunch({
					url: path
				});
			}
		}
	}
</script>

<style lang="scss">
	.subsection-style {
		/* 设置视图的宽度 */
		width: 200px;
	}
</style>